let product // 商品
/**
 *  获取商品id
 * @returns
 */
function getProductId() {
	let str = location.search // ?id=2
	let id = str.split('=')[1]
	return id
}

/**
 * 获取商品详情
 */
function getProductDetail() {
	let id = getProductId()
	axios({
		method: 'get',
		url: 'https://api.yuguoxy.com/api/shop/find',
		params: { id },
	}).then(res => {
		res = res.data
		product = res.resultInfo // 添加购物车使用
		showProductDetail(product)
	})
}

/**
 * 动态渲染详情
 */
function showProductDetail(product) {
	let str = `
            <div class="container" id="glass1">
                <div class="left-wraper">
                    <div class="m-left">
                        <img src="${product.picture}" alt="show1" />
                        <!-- 遮罩层 -->
                        <div class="mask"></div>
                    </div>
                    <ul>
                        <li class="active"><img src="${product.list[0]}" alt="small1" /></li>
                        <li><img src="${product.list[1]}" alt="small2" /></li>
                        <li><img src="${product.list[2]}" alt="small3" /></li>
                        <li><img src="${product.list[3]}" alt="small4" /></li>
                    </ul>
                </div>

                <!-- 放大镜 -->
                <div class="right-wraper">
                    <img src="${product.picture}" alt="big1" />
                </div>


                <span class="mid"> <span>${product.product}</span><br>

                <p>￥${product.price}</p>
				
				
                </span>
               

                <div class="right">
                    <span class="inf">卖家信息</span>
                    <img src="${product.picture}" height='290' alt="">
                    <span>${product.shop}</span>
                    <span class="serve"> 服务 描述 物流</span>
					<span class="num">
					<span>${product.price}</span>
					<span>${product.putaway}</span>
					<span>${product.id}</span>
					</span>
                    
                </div>
           </div>
            `

	const detailWraper = document.querySelector('.glass-wrapper')
	detailWraper.innerHTML = str

	// 数据动态渲染完成后，再操作放大镜节点
	let glass = new Glass('#glass1')
	glass.setScale()
	glass.onGlass()
	glass.onTab(product)
}

/**
 * 查看购物车
 */

function bindCart() {
	let lookCart = document.querySelector('.look-cart')
	let addCart = document.querySelector('.add-cart')

     lookCart.addEventListener('click',function(){
        location.href="../html/cart.html"
          })
// 	// 添加购物车
	addCart.addEventListener('click', function () {
		// 1. 获取原来购物车数组
		let cartList = localStorage.getItem('CART-LIST') || '[]'
		cartList = JSON.parse(cartList)

		// 1.1 判断商品是否已经加入购物车
		let oldProduct = cartList.find(item => item.id == product.id)
		if (oldProduct) {
			oldProduct.num++ // 商品存在数量加一
		} else {
			// 2. 添加商品
			let newProduct = {
				id: product.id,
				name: product.product,
				url: product.picture,
				price: product.price,
				num: 1,
				state: false,
			}
			cartList.push(newProduct)
		}

		//3.持久存储
		localStorage.setItem('CART-LIST', JSON.stringify(cartList))
		alert('加入购物车成功!')
	})
}

getProductDetail()
bindCart()
